<template>
  <div class="topbar">
    <span v-if="userStore.isLogin">欢迎，{{ userStore.username }}</span>
    <span v-if="userStore.isLogin && userStore.email">（邮箱：{{ userStore.email }}）</span>
    <span v-if="userStore.isLogin && userStore.role">（角色：{{ userStore.role }}）</span>
    <button v-if="userStore.isLogin" @click="handleLogout">退出登录</button>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import { logout } from '@/api/auth';

const userStore = useUserStore();
const router = useRouter();

async function handleLogout() {
  //await logout();
  userStore.logout();
  router.push('/login');
}
</script>

<style scoped>
.topbar { padding: 12px 24px; background: #f5f5f5; display: flex; justify-content: flex-end; align-items: center; }
.topbar span { margin-right: 16px; }
</style> 